<template>
  <div class="add-supervision-information-container">
    <div>
      <div class="my-form">
        <div class="my-form-item">
          <div class="my-form-item-label">课程名称</div>
          <div class="my-form-item-content">
            <div>{{ coursename }}</div>
            <div>被评价教员</div>
            <div>{{ teachername }}</div>
          </div>
        </div>
        <div class="my-form-item"></div>
        <div class="my-form-item">
          <div class="my-form-item-label">评价标准</div>
          <div class="my-form-item-content">
            <ul>
              <li>
                <span>评价标准</span>
                <span
                  v-for="(appraise, index) in appraiseList"
                  v-if="index >= 1"
                  :key="index"
                  :style="{ width: 932 / (appraiseList.length - 1) + 'px' }"
                  >{{ appraise }}</span
                >
              </li>
              <li
                v-for="(item, index) in this.pjGuideitemresultsNew"
                :key="index"
              >
                <span>{{ item.guideitemname }} </span>
                <span
                  v-for="(appraise, index) in appraiseList"
                  v-if="index >= 1 && item.guideitemrank != 1"
                  :key="index"
                  :style="{ width: 932 / (appraiseList.length - 1) + 'px' }"
                >
                  <el-checkbox
                    v-model="item.checkedList[index]"
                    @change="itemChange(item, index)"
                  ></el-checkbox
                ></span>
              </li> 
            </ul>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">个性化指标</div>
          <div class="my-form-item-content">
            <ul>
              <li
                v-for="(item, index) in this.pjIndividualizedqas"
                :key="index"
              >
                <span>{{ item.question }} </span>
                <span style="border-right:0 none; padding:3px 0 0 10px;"
                  ><el-input v-model="item.answer" placeholder=""></el-input
                ></span>
              </li>
              <li v-for="(item, i) in this.pjIndividualizedmultiples" :key="i">
                <span>{{ item.question }} </span>
                <span>
                  <el-checkbox
                    v-model="item.answerList[0]"
                    :label="item.optiona"
                    @change="itemChange2(item, item.optiona, 0)"
                  ></el-checkbox
                ></span>
                <span>
                  <el-checkbox
                    v-model="item.answerList[1]"
                    :label="item.optionb"
                    @change="itemChange2(item, item.optionb, 1)"
                  ></el-checkbox
                ></span>
                <span>
                  <el-checkbox
                    v-model="item.answerList[2]"
                    :label="item.optionc"
                    @change="itemChange2(item, item.optionc, 2)"
                  ></el-checkbox
                ></span>
                <span>
                  <el-checkbox
                    v-model="item.answerList[3]"
                    :label="item.optiond"
                    @change="itemChange2(item, item.optiond, 3)"
                  ></el-checkbox
                ></span>
              </li>
            </ul>
          </div>
        </div>
        <!--            dengji  评价等级  lv    evaluation_grade    evaluation_grades-->
        <div class="my-form-item">
          <div class="my-form-item-label">评价等级</div>
          <div class="my-form-item-content">
            <div>
              <el-select
                size="mini"
                class="evaluate-level"
                style="width: 89px"
                v-model="tableData.dengji"
                popper-class="add-supervision-information-green-popper"
              >
              <!--  v-if="index != 0 && manyPeople == 0" -->
                <el-option
                  v-for="(item, index) in evaluation_grades"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </div>
            <div>评定分数</div>
            <div>
              <el-input
                style="width: 110px"
                v-model="tableData.score"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">意见和建议</div>
          <div class="my-form-item-content">
            <div>
              <el-input
                type="textarea"
                :rows="4"
                style="width: 1441px"
                v-model="tableData.idea"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="button-group">
        <div @click="pjupdate">保存</div>
        <div @click="cancelLast">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { pjupdate, studentResultid } from "@/api/student/student";

export default {
  name: "addsupervisioninformation",
  data() {
    return {
      // 评价标准列表
      appraiseList: [],
      resultid: "",
      // 数据存储列表
      tableData: {
        dengji: "",
        coursename: "",
        teachername: "",
        idea: "",
        score: ""
      },
      // 个性化指标列表
      pjIndividualizedqas: [
        {
          answer: "",
          individualizedid: "",
          question: "",
          resultid: ""
        }
      ],
      // 评价标准列表
      pjGuideitemresultsNew: [
        {
          checke: "",
          comments: "",
          guideid: "",
          guideitemid: "",
          guideitemname: "",
          guideitemorder: 1,
          guideitemrank: 1,
          guideitemresultid: "",
          parentguideitemid: "",
          pjResultDengji: "",
          pjResultid: "",
          weight: 2
        }
      ],
      // 选择题列表
      pjIndividualizedmultiples: [
        {
          answer: "",
          answerList: [],
          individualizedid: "",
          optiona: "",
          optionb: "",
          optionc: "",
          optiond: "",
          question: "",
          resultid: ""
        }
      ],
      checkboxList1: [
        {
          guideitemname: "1.jjj",
          //  选中abcd
          pjResultDengji: "",
          check: "title",
          Adisabled: ""
        },
        {
          guideitemname: "1.[教学准备]教学目标与预期具体明确",
          pjResultDengji: "",
          AChecked: false,
          BChecked: false,
          CChecked: false,
          DChecked: false,
          Adisabled: false,
          Bdisabled: false,
          Cdisabled: false,
          Ddisabled: false,
          check: "check"
        },
        {
          guideitemname: " 2.[教学准备]教学目标与预期具体明确",
          pjResultDengji: "",
          AChecked: false,
          BChecked: false,
          CChecked: false,
          DChecked: false,

          Adisabled: false,
          Bdisabled: false,
          Cdisabled: false,
          Ddisabled: false,
          check: "check"
        },
        {
          guideitemname: "3.[教学准备]教学目标与预期具体明确",
          pjResultDengji: "",
          AChecked: false,
          BChecked: false,
          CChecked: false,
          DChecked: false,
          check: "check"
        }
      ],

      value1: new Date(),

      //评价等级
      evaluation_grades: [
        { label: "A", value: "A",disabled: false },
        { label: "B", value: "B",disabled: false },
        { label: "C", value: "C",disabled: false },
        { label: "D", value: "D",disabled: false }
      ],
      manyPeopleList:this.$route.query.manyPeople
    };
  },

  mounted() {
    // for(var i=0;i<this.evaluation_grades.length;i++){
    //   this.evaluation_grades[i].disabled = false;
    //   for(let j = 0;j < this.manyPeopleList.length;j++){
    //     console.log(this.manyPeopleList[i].manyPeople)
    //     if(this.manyPeopleList[i].manyPeople == '1'){
    //       console.log(this.manyPeopleList[i])
    //       this.manyPeopleList[j].dengji == this.evaluation_grades[i].value ? this.evaluation_grades[i].disabled = true : this.evaluation_grades[i].disabled = false; 
    //     }
    //   }
    // }
    this.manyPeopleList.forEach((res,index)=>{
      if(res.manyPeople == 0){
        if(res.dengji.indexOf(',') != -1){
          this.evaluation_grades[2].disabled = true;
          this.evaluation_grades[3].disabled = true;
        } else {
          if(this.evaluation_grades[index].value == res.dengji){
            this.evaluation_grades[index].disabled = true
          }
        }
      }
    })
    this.studentResultid();
  },
  computed: {
    // manyPeople() {
    //   return this.$route.query.manyPeople;
    // }
  },
  methods: {
    
    itemChange(item, index) {
      // 改变每个问题的选项，选项收集到checkedList数组里
      item.checkedList.forEach(function(val, inx) {
        item.checkedList[inx] = false;
      });
      item.checkedList[index] = true;
      item.pjResultDengji = this.appraiseList[index];
    },
    // 选择题单选按钮
    itemChange2(item, option, index) {
      // 改变每个问题的选项，选项收集到checkedList数组里
      item.answerList.forEach(function(val, inx) {
        item.answerList[inx] = false;
      });
      item.answerList[index] = true;
      item.answer = option;
    },
    studentResultid() {
      return new Promise(() => {
        //教员查询到所有数据
        studentResultid(this.$route.query.resultid).then(res => {
          this.appraiseList = res.data.data.lv.split(",");
          this.pjIndividualizedqas = res.data.data.pjIndividualizedqas;
          this.tableData = res.data.data;
          this.pjGuideitemresultsNew = res.data.data.pjGuideitemresults;
          this.pjIndividualizedmultiples =
            res.data.data.pjIndividualizedmultiples;
          this.pjGuideitemresultsNew.forEach(element => {
            this.$set(element, "checkedList", []);
          });
          this.pjIndividualizedmultiples.forEach(element => {
            this.$set(element, "answerList", []);
          });
          this.coursename = res.data.data.pjEvalactor.coursename;
          this.teachername = res.data.data.teachername;
          this.pjGuideitemresultsNew.forEach(element => {
            if (element.guideitemrank == 2) {
              let i = this.appraiseList.indexOf(element.pjResultDengji);
              element.checkedList[i] = true;
            }
          });
          this.pjIndividualizedmultiples.forEach(element => {
            element.opList = [
              element.optiona,
              element.optionb,
              element.optionc,
              element.optiond
            ];
            let i = element.opList.indexOf(element.answer);
            element.answerList[i] = true;
          });
        });
      });
    },

    ///pjresult/update    修改保存
    pjupdate() {
      // console.log('评教信息1', this.pjIndividualizedqas)
      // console.log('评教信息2', this.pjIndividualizedmultiples)
      // return
      //修改传值
      this.tableData.pjGuideitemresults = this.pjGuideitemresultsNew;
      this.tableData.pjIndividualizedmultiples = this.pjIndividualizedmultiples;
      this.tableData.pjIndividualizedqas = this.pjIndividualizedqas;
      return new Promise(() => {
        //网上评教修改保存
        pjupdate(this.tableData).then(res => {
          this.$router.push({
            path: "/student/evaluation/supervision"
          });
        });
      });
    },
    cancelLast(){
      this.$router.push({
        path: "/student/evaluation/supervision"
      });
    },
    qxupdate() {
      studentResultid(this.$route.query.resultid).then(res => {
        this.tableData = res.data.data;
        this.checkboxList1 = res.data.data.pjGuideitemresults;
        this.pjGuideitemresultsNew.forEach(element => {
          if (element.guideitemrank == 2) {
            let i = this.appraiseList.indexOf(element.pjResultDengji);
            element.checkedList[i] = true;
          }
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.add-supervision-information-container {
  .evaluate-level {
    .el-input__inner {
      border: 1px solid rgba(2, 200, 108, 1);
      color: rgba(2, 200, 108, 1);
      background: rgba(241, 255, 248, 1);

      .el-icon-arrow-up:before {
        content: "\E6E1";
      }
    }

    .el-select .el-input.is-focus .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }

    .el-select:focus .el-input__inner,
    .el-select:hover .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }

    .el-input .el-select__caret {
      color: rgba(2, 200, 108, 1);
    }

    .el-select-dropdown__item.selected {
      color: rgba(2, 200, 108, 1);
    }

    .el-input.is-focus .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }
  }

  .el-textarea__inner {
    resize: none;
  }

  .manual-entry-container {
    .el-dialog__body {
      > div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;

        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);

          &:last-child {
            border-bottom: none;
          }

          > div {
            display: flex;

            > div {
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:nth-child(1) {
                width: 220px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }

              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 43px;
    }

    .dialog-footer {
      > button {
        width: 87px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
      }
    }
  }
}

.add-supervision-information-green-popper {
  .el-select-dropdown__item {
    color: rgba(2, 200, 108, 1);
  }

  .el-select-dropdown__item.selected {
    color: rgba(2, 200, 108, 1);
    font-weight: 700;
  }
}
</style>
<style scoped lang="less">
.add-supervision-information-container {
  .my-form {
    width: 1737px;
    height: 100%;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 57px auto 19px;

    .my-form-item {
      border-bottom: 1px solid rgba(0, 76, 167, 0.39);

      > div {
        display: table-cell;
        min-height: 54px;
        vertical-align: middle;
      }

      .my-form-item-label {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        background: rgba(77, 129, 192, 0.1);
        width: 239px;
        text-align: center;
      }

      .my-form-item-content {
        width: 1497px;
        font-size: 14px;
        color: #004ca7;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }

      &:nth-child(1) {
        .my-form-item-content {
          > div {
            height: 69px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;

            &:nth-child(1) {
              width: 563px;
              text-align: center;
            }

            &:nth-child(2) {
              width: 233px;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
              text-align: center;
            }

            &:nth-child(3) {
              width: 600px;
              text-align: center;
            }

            &:nth-child(4) {
              width: 240px;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
              text-align: center;
            }

            &:nth-child(5) {
              padding-left: 20px;
            }
          }
        }
      }

      &:nth-child(2) {
        .my-form-item-content {
          > div {
            height: 56px;
            vertical-align: middle;
            padding-top: 10px;
            padding-left: 13px;

            > span {
              font-size: 16px;
              font-weight: bold;
              line-height: 39px;
              margin-right: 86px;
              color: #004ca7;

              > span {
                font-weight: 400;
              }
            }
          }
        }
      }

      &:nth-child(3) {
        .my-form-item-content {
          > ul {
            list-style: none;

            > li {
              border-bottom: 1px solid rgba(0, 76, 167, 0.39);

              &:nth-child(1) {
                background: rgba(77, 129, 192, 0.1);

                > span {
                  font-weight: bold;
                }
              }

              &:last-child {
                border-bottom: none;
              }

              > span {
                display: inline-block;
                height: 55px;
                text-align: center;
                padding-top: 18px;
                width: 233px;
                vertical-align: middle;

                &:nth-child(1) {
                  width: 563px;
                }

                &:nth-child(2) {
                  border-left: 1px solid rgba(0, 76, 167, 0.39);
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                }

                &:nth-child(4) {
                  border-left: 1px solid rgba(0, 76, 167, 0.39);
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                }
              }
            }
          }
        }
      }

      &:nth-child(4) {
        .my-form-item-content {
          > ul {
            list-style: none;

            > li {
              border-bottom: 1px solid rgba(0, 76, 167, 0.39);

              //   &:nth-child(1) {
              //     background: rgba(77, 129, 192, 0.1);

              //     > span {
              //       font-weight: bold;
              //     }
              //   }

              &:last-child {
                border-bottom: none;
              }

              > span {
                display: inline-block;
                height: 55px;
                text-align: center;
                padding-top: 18px;
                width: 233px;
                vertical-align: middle;

                &:nth-child(1) {
                  width: 563px;
                }

                &:nth-child(2) {
                  border-left: 1px solid rgba(0, 76, 167, 0.39);
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                }

                &:nth-child(4) {
                  border-left: 1px solid rgba(0, 76, 167, 0.39);
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                }

                .el-checkbox {
                  margin-right: 200px;
                }
              }
            }
          }
        }
      }
      &:nth-child(5) {
        .my-form-item-content {
          > div {
            height: 76px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;

            &:nth-child(1) {
              width: 562px;
              padding-left: 20px;
            }

            &:nth-child(2) {
              width: 234px;
              background: rgba(77, 129, 192, 0.1);
              border-left: 1px solid rgba(0, 76, 167, 0.39);
              border-right: 1px solid rgba(0, 76, 167, 0.39);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
            }

            &:nth-child(3) {
              width: 625px;
              padding-left: 21px;
            }
          }
        }
      }

      &:nth-child(6) {
        .my-form-item-content {
          > div {
            height: 116px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;

            &:nth-child(1) {
              width: 630px;
              padding-left: 21px;
              padding-top: 10px;
            }

            &:nth-child(2) {
              width: 240px;
              background: rgba(77, 129, 192, 0.1);
              border-left: 1px solid rgba(0, 76, 167, 0.39);
              border-right: 1px solid rgba(0, 76, 167, 0.39);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              padding-top: 45px;
            }

            &:nth-child(3) {
              width: 625px;
              padding-left: 21px;
              padding-top: 42px;

              > span {
                display: inline-block;
                background: #ebe6ff;
                border: 1px solid #5230e9;
                border-radius: 4px;
                font-size: 16px;
                font-weight: 400;
                color: #5230e9;
                padding: 3px 17px;
              }
            }
          }
        }
      }
    }
  }

  .button-group {
    width: 915px;
    margin: 0 auto;
    text-align: center;

    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;

      &:nth-child(1) {
        color: rgba(81, 174, 246, 1);
        border: 1px solid rgba(81, 174, 246, 1);
        background: rgba(241, 248, 254, 1);
      }

      &:nth-child(2) {
        color: #f31c15;
        border: 1px solid #f31515;
        background: #fff6ef;
        margin: 0 40px;
      }

      &:nth-child(3) {
        color: rgb(250, 57, 57);
        border: 1px solid rgba(250, 83, 57, 1);
        background: rgba(255, 239, 239, 1);
      }
    }
  }
}
</style>
